<template>
	<div class="bg-white p-4">
		<div class="flex">
			<t-button class="mr-4" @click="openAddPosition">添加岗位</t-button>
		</div>
		<t-table 
			class="mt-4"
			row-key="department1_id" 
			:columns="columns" 
			:data="emptyData ? [] : data" 
			:pagination="{ total: this.data.length }"
			>
			<!-- 开关插槽 -->
			<template #switch="{row}">
				<t-switch size="large" :defaultValue="!row.start" :label="['启', '禁']" @change="onChange(row)"></t-switch>
			</template>
			<!-- 操作插槽 -->
			<template #op-column>
				<p>操作</p>
			</template>
			<template #op="{row}">
				<div class="flex">
					<div class="text-blue-700 mr-2 cursor-pointer hover:underline" @click="openUpdateLoading(row)">编辑</div>
					<div class="text-red-500 cursor-pointer hover:underline" @click="deletePosition(row)">删除</div>
				</div>
			</template>
		</t-table>
		<!-- 添加岗位弹窗 -->
		<t-dialog
		header="添加岗位"
		:visible.sync="addPositionVisible"
		:onConfirm="addPosition"
		:confirmBtn="Loading"
		>
			<t-form :data="addFormData" labelAlign="top" class="mt-2 mb-16">
				<t-form-item label="岗位名称" name="add_position_name" requiredMark>
					<t-input
					v-model="addFormData.add_position_name"
					placeholder="请编辑岗位名称"
					:status="add_position_name_status"
					:tips="add_position_name_tips"
					:onBlur="addPositionNameBlur"
					></t-input>
				</t-form-item>
			</t-form>
		</t-dialog>
		<!-- 编辑岗位弹窗 -->
		<t-dialog
		header="编辑岗位名称"
		:visible.sync="updatePostiotionVisible"
		:onConfirm="updatePosition"
		:confirmBtn="Loading"
		>
			<t-form :data="updateFormData" labelAlign="top" class="mt-2 mb-16">
				<t-form-item label="岗位名称" name="update_position_name" requiredMark>
					<t-input
					v-model="updateFormData.update_position_name"
					placeholder="请编辑岗位名称"
					:status="update_position_name_status"
					:tips="update_position_name_tips"
					:onBlur="updatePositionNameBlur"
					></t-input>
				</t-form-item>
			</t-form>
		</t-dialog>
	</div>
</template>

<script>
	import { isSpecial } from '@/unit'
	import { getUserId } from '@/unit/auth'
	import { toDay } from '@/unit/myDate'
	
	// 表头配置
	const getColumns = (isFixedColumn) => [
		{
			colKey: 'position_id',
			title: '岗位编号',
		},
		{
			colKey: 'position_name',
			title: '岗位名称',
		},
		{
			colKey: 'user_number',
			title: '岗位人数'
		},
		{
			colKey: 'user_id',
			title: '创建人'
		},
		{
			colKey: 'add_date',
			title: '创建时间'
		},
		{
			colKey: 'state',
			title: '是否禁用',
			cell: 'switch'
		},
		{
			colKey: 'operation',
			title: '管理',
			cell: 'op',
			fixed: 'right'
		},
	];
	
	export default {
		name: 'Divisional',
		data() {
			return {
				fixedColumns: false,
				emptyData: false,
				data: [],
				// 提交按钮加载状态
				Loading: {},
				// 编辑岗位名称
				updatePostiotionVisible: false,
				updateFormData: {
					update_position_name: '',
					update_position_id: ''
				},
				update_position_name_status: '',
				update_position_name_tips: '',
				// 删除确认弹窗
				deleteLoadin: null,
				// 添加岗位
				addPositionVisible: false,
				addFormData: {
					add_position_name: '',
				},
				add_position_name_status: '',
				add_position_name_tips: ''
			}
		},
		computed: {
			// 表头配置
			columns() {
				return getColumns(this.fixedColumns);
			},
		},
		watch: {

		},
		methods: {
			// 添加表单校验
			addPositionNameBlur(){
				if (this.addFormData.add_position_name === ''){
					this.add_position_name_status = 'error'
					this.add_position_name_tips = '岗位名称是必填项'
					return false
				} else {
					if (!isSpecial(this.addFormData.add_position_name)){
						this.add_position_name_status = 'error'
						this.add_position_name_tips = '请不要输入特殊符号'
						return false
					} else {
						this.add_position_name_status = ''
						this.add_position_name_tips = ''
						return true
					}
				}
			},
			
			// 弹窗确认添加岗位
			addPosition(){
				this.Loading = {
					content: '提交中...',
					theme: 'primary',
					loading: true
				}
				if(!this.addPositionNameBlur()){
					this.Loading = {}
					return this.$message.error('请输入合法的岗位名称')
				}
				let obj = {
					position_name: this.addFormData.add_position_name,
					user_id: getUserId(),
					add_date: toDay()
				}
				this.$store.dispatch('position/addPosition', obj).then(res => {
					if (res.status === 0){
						this.$message.success(res.message)
						this.getPosition()
						this.addPositionVisible = false
						this.Loading = {}
					} else {
						this.$message.error(res.message)
						this.Loading = {}
					}
				})
			},
			
			// 开启添加岗位弹窗
			openAddPosition(){
				this.addPositionVisible = true
			},
			
			// 删除岗位
			deletePosition(row){
				if(this.deleteLoadin){
					this.deleteLoadin.show()
					return
				}
				this.deleteLoadin = this.$dialog({
					header: '提示',
					body: '是否确认删除该岗位',
					onConfirm: ({e}) => {
						let obj = {
							position_id: row.position_id
						}
						this.$store.dispatch('position/deletePosition', obj).then(res => {
							if (res.status === 0){
								this.$message.success(res.message)
								this.getPosition()
							} else {
								this.$message.error(res.message)
							}
							this.deleteLoadin.hide()
						})
					}
				})
			},
			
			// 编辑岗位输入框校验
			updatePositionNameBlur(){
				if(this.updateFormData.update_position_name === ''){
					this.update_position_name_status = 'error'
					this.update_position_name_tips = '岗位名称是必填项'
					return false
				} else {
					if(!isSpecial(this.updateFormData.update_position_name)){
						this.update_position_name_status = 'error'
						this.update_position_name_tips = '请不要输入特殊符号'
						return false
					} else {
						this.update_position_name_status = ''
						this.update_position_name_tips = ''
						return true
					}
				}
			},
			// 弹窗确认修改岗位
			updatePosition(){
				this.Loading = {
					content: '提交中...',
					theme: 'primary',
					loading: true
				}
				if(!this.updatePositionNameBlur()){
					this.Loading = {}
					return this.$message.error('请输入合法的岗位名称')
				}
				let obj = {
					position_id: this.updateFormData.update_position_id,
					position_name: this.updateFormData.update_position_name
				}
				this.$store.dispatch('position/updatePosition', obj).then(res => {
					if (res.status === 0){
						this.$message.success(res.message)
						this.getPosition()
						this.updatePostiotionVisible = false
						this.Loading = {}
					} else {
						this.$message.error(res.message)
						this.Loading = {}
					}
				})
			},
			// 打开编辑岗位弹窗
			openUpdateLoading(row){
				this.updatePostiotionVisible = true
				this.updateFormData.update_position_name = row.position_name
				this.updateFormData.update_position_id = row.position_id
				this.update_position_name_status = ''
				this.update_position_name_tips = ''
			},
			// 开关变化
			onChange(row){
				let state = function(){
					if(!row.start){return 1} else {return 0}
				}
				let obj ={
					position_id: row.position_id,
					start: state()
				}
				this.$store.dispatch('position/startPosition', obj).then(res => {
					if (res.status === 0){
						this.$message.success(res.message)
						this.getPosition()
					} else {
						this.$message.error(res.message)
						this.getPosition()
					}
				})
			},
			// 请求获取部门列表
			getPosition() {
				this.$store.dispatch('position/getPositionList').then(res => {
					if (res.status == 0) {
						this.data = res.data
					} else {
						this.$message.error(res.message)
					}
				})
			}
		},
		created() {
			// 请求获取部门列表
			this.getPosition()
		}
	}
</script>

<style>
</style>
